<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<style>
    .wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}

.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform:skew(45deg);
}

.wrapper span {
  display:block;
  transform:skew(-45deg)
}
.wrap {
  margin-top:500px;
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%);/*x移动位移,y方向移动位移*/
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.wrappe {
  
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrappe div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
</style>
</head> 
<body>
<div class="wrapper">
  <div><span>我不想被扭曲(^_^)</span></div>
</div>
<div class="wrap">
  我不知道我的宽度和高是多少，我要实现水平垂直居中    
  </div>
  <div class="wrappe">
    <div>原点在默认位置处</div>
  </div>
  <div class="wrappe transform-origin">
    <div>原点重置到左上角</div>
  </div>
</body>
</html>